/* eslint-disable react/prop-types */
import { Button, Col, Popover, Row, Typography } from 'antd'
import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons'

import styles from './styles.module.less'

function HeaderItem({ label, value }: { label: string; value?: React.ReactNode }) {
  return (
    <div className={styles.box_header_item}>
      <div className={styles.box_header_item_label}>{label}</div>
      <Typography.Text className={styles.ellipsis} ellipsis={{ tooltip: value }}>
        {value ?? '-'}
      </Typography.Text>
    </div>
  )
}

interface LabelProps {
  item: any
}

export function Label({ item }: LabelProps) {
  return (
    <Row wrap={false} gutter={16} style={{ width: '100%' }}>
      <Col flex={`0 0 20%`}>
        <HeaderItem label="运单号" value={item.waybillNo} />
      </Col>
      <Col flex={`0 0 20%`}>
        <HeaderItem label="FBA ID" value={item.fbaId} />
      </Col>
      <Col flex={`0 0 20%`}>
        <HeaderItem label="物流渠道" value={item.logisticsChannelName} />
      </Col>
      <Col flex={`0 0 20%`}>
        <HeaderItem label="渠道单号" value={item.logisticsChannelTrackingNumber} />
      </Col>
      <Col flex={`0 0 20%`}>
        <HeaderItem
          label="结果"
          value={
            item.result === undefined ? (
              ''
            ) : (
              <Popover content={item.result === 1 ? '成功' : `${item.result}`}>
                <Button
                  type="text"
                  icon={
                    item.result === 1 ? (
                      <CheckCircleOutlined style={{ color: 'green' }} />
                    ) : (
                      <CloseCircleOutlined style={{ color: 'red' }} />
                    )
                  }
                >
                  {item.result === 1 ? '成功' : '失败'}
                </Button>
              </Popover>
            )
          }
        />
      </Col>
    </Row>
  )
}
